<%--
    Document   : agregarObjetoPerdido
    Created on : 16/11/2010, 04:23:47 PM
    Author     : rafael
--%>

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<% request.setAttribute("allowed", "Gestionar la Configuracion del Sistema"); %>
<%@ include file='../Templates/security.jsp' %>

<h1 class="title">Gestión de Roles</h1>
<p class="meta"></p>
<center>
    <h2>Agregar Roles a Usuarios</h2>
    <div id="usersSection">
        <form id="consultarPersonalForm" action="javascript:void(0);">
            <br>
            <p>Rellene los campos de búsqueda</p>
            <br>
            <table  align="center" border="0">
                <tr>
                    <td >Cédula:</td>
                    <td>
                        <select id="nacionalidad" name="voe" class="filter">
                            <option value="V">V</option>
                            <option value="E">E</option>
                        </select>
                        &nbsp;-&nbsp;
                        <input type='text' id="ced" size="17" maxlength="12" name="ci" class="filter"/>
                    </td>
                </tr>
                <tr>
                    <td >UsbId:</td>
                    <td>
                        <input type='text' id="UID" size="25" maxlength="35" name="usbid" class="filter"/>
                    </td>
                </tr>
                <tr>
                    <td >Nombre:</td>
                    <td>
                        <input type='text' id="name1" size="25" maxlength="20" name="nombre1" class="filter"/>
                    </td>
                </tr>
                <tr>
                    <td >Apellido:</td>
                    <td>
                        <input type='text' id="ap1" size="25" maxlength="20" name="apellido1" class="filter"/>
                    </td>
                </tr>
                <tr>
                    <td >Grupo:</td>
                    <td><select id="Grupos" name="grupo" class="filter"></select></td>
                </tr>
            </table>
            <br>
            <html:button property="" value="Consultar" styleId="consultarForm" onclick="consultarPersonal();"/>
            <html:button property="" styleId="atrasSistema" value="  Atrás  "/>
            <html:reset property="" styleId="resetForm" value="Limpiar" styleClass="oculta"/>
        </form>
        <br>
        <div id="updateRolResult"></div>
        <br>
        <div id="consultarPersonal">
            <table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable">
                <thead id="head">
                    <tr>
                        <th><h5><div class="ordenar" onclick="orden('cedula');" >Cedula</div></h5></th>
                        <th><h5><div class="ordenar" onclick="orden('nombre1');" >Nombre</div></h5></th>
                        <th><h5><div class="ordenar" onclick="orden('apellido1');" >Apellido</div></h5></th>
                        <th><h5><div class="ordenar" onclick="orden('id_grupo');" >Grupo</div></h5></th>
                        <th><h5><div class="ordenar" onclick="orden('id_grupo');" >Funcion</div></h5></th>
                        <th><h5> Roles </h5></th>
                    </tr>
                </thead>
                <tbody id="resultado"></tbody>
            </table>
            <%@ include file="../Templates/paginasTabla.jsp" %>
        </div>
    </div>
    <br>
    <div id="rolesSection">
        <div id="nombreEmpleado"></div>
        <br>
        <ul>
            <li>Seleccione los roles que podrá cumplir el usuario en el sistema.</li>
        </ul>
        <br>
        <form action="/asignarRolPersona" id="asignarRolPersonaForm" onsubmit="return asignarRolPersonal(); " >
            <input type="hidden" name="cedula" value="" id="cedulaPersonal"/>
            <table id="Roles" cellspacing="5px"></table>
            <br>
            <input type="submit" value = "Guardar" id="submit"/>
            <input type="button" id="atrasUsers" value="Atrás" />
            <div id="loading"><img alt="Cargando..." src="style/images/cargando.gif"/></div>
            <br>
        </form>
    </div>
    <br/>
</center>
<div style="clear: both;">&nbsp;</div>
<script type="text/javascript">
    $('#atrasSistema').click(Sistema);
    $('#atrasUsers').click(function(){
        $('#rolesSection').hide();
        $('#usersSection').show();
        $('#cedulaPersonal').val("");
        $('#nombreEmpleado').html("");
    });
    
    $(function(){
        $('#rolesSection').hide();
        $("#consultarPersonal").hide();
        listaSedes();
        listaGrupos();
        listarRoles(); 

        $.getJSON("listaDeFuncion.do",
        function(data) {
            $('#Funciones').html("<option value='' selected>-</option>");
            $.each(data.Funciones, function(i,item){
                var string = "<option value='"+item.id_funcion+"'>"+item.id_funcion+"</option>";
                $('#Funciones').append(string);
            });
            $('#loading').hide();
        });
    });

    function listarRoles(){
        $.getJSON("listaRoles.do",
        function(data) {
            $('#Roles').html("");
            cat = "";
            row = 0;
            $.each(data.Roles, function(i,item){
                if(item.categoria != cat){
                    cat = item.categoria;
                    tr = $('<tr>');
                    tr.append($("<th colspan='2'>").append("<br>"+cat+"<hr>"));
                    $('#Roles').append(tr);
                    tr = $('<tr>');
                } else if(row % 2 == 0) tr = $('<tr>');
                tr.append($("<td>").append("<input type='checkbox' name='roles' id='rol_"+item.id+"' value='"+item.id+"' class='rolCheck userRol'> "+ item.nombre));
                $('#Roles').append(tr);
                row++;
            });
            $('#rol_1').removeClass('userRol').click(function(){
                checked = ($(this).attr('checked') == 'checked');
                $('.userRol').attr('checked',checked).attr('disabled',checked);
            });
        });
    }

    function consultarPersonal(){
        limit = $('#limit').val();
        $.ajax({
            type: 'POST',
            url:"consultarPersonal.do?limit="+limit+"&offset="+offset+"&order="+order+"&asc="+asc,
            data: $('#consultarPersonalForm').serialize(),
            dataType: 'json',
            success: proceessConsultarPersonal
        });
    }

    function proceessConsultarPersonal(data) {
        $('#resultado').empty();
        $.each(data.personal , function(i,item){
            if ( (i % 2) == 0) fila = $("<tr bgcolor='#fff' id='persona_"+item.ci+"' class='personaRow'>");
            else fila = $("<tr bgcolor='#ecf2f6' id='persona_"+item.ci+"' class='personaRow'>");

            fila.append($("<td>").append(item.ci));
            fila.append($("<td id='nombre'>").append(item.nombre1 + " "+item.nombre2));
            fila.append($("<td id='apellido'>").append(item.apellido1+" "+item.apellido2));
            fila.append($("<td>").append(item.grupo));
            fila.append($("<td>").append(item.funcion));

            det = "<img src='style/images/detalles.png' alt='Ver Roles' width='20' height='20' class='showDetails'>";
            fila.append($("<td>").append(det));
            $('#resultado').append(fila);
        });

        $('.showDetails').click(function(){
            cedula = $(this).parent().parent().attr('id').replace('persona_','');
            listaRolPersonal(cedula);
        });

        tam = data.tam
        if(tam==0){
            $("#obs").html('<h4>No hay resultados que coincidan con los parametros dados.</h4>');
            $("#consultarPersonal").hide();
        } else {
            $("#obs").html('OBSERVACIÓN: Para ordenar la tabla por un campo específico, presionar el nombre de la columna.');
            $("#currentpage").html((offset/limit)+1);
            $("#pagelimit").html(Math.ceil(tam/limit));
            $("#consultarPersonal").show();
        }
    }

    function listaRolPersonal(cedula){
        $.ajax({
            method: 'POST',
            url: "listaRolPersonal.do",
            data: {cedula: cedula},
            dataType: 'json',
            success: function(data){
                $('.rolCheck').attr('checked',false);
                $.each(data.Roles , function(i,item){
                    $('#rol_'+item.id).attr('checked',true);
                });
                checked = ($('#rol_1').attr('checked') == 'checked');
                if(checked) $('.userRol').attr('checked',true).attr('disabled',true);
            },
            complete: function(){
                empleado = $("#persona_"+cedula+" #apellido").html()+", "+$("#persona_"+cedula+" #nombre").html();
                $('#nombreEmpleado').html(empleado);
                $('#cedulaPersonal').val(cedula);
                $('#usersSection').hide();
                $('#rolesSection').show();
            }
        });
        return false;
    }

    function asignarRolPersonal(){
        sendForm('asignarRolPersonaForm','asignarRolPersona','updateRolResult');
        $('#atrasUsers').click();
        return false;
    }
</script>